{% extends 'layout/basic.html' %}
{% load static %}

{% block title %}
    {{ title }}
{% endblock %}

{% block css %}
    <link rel="stylesheet" href="{% static 'css/acount.css' %}">
    <style>
        .error-msg {
            color: red;
            position: absolute;
            font-size: 13px;
        }

        .myBtn {
            margin-top: 20px;
        }
    </style>
{% endblock %}

{% block content %}
    <section class="account" id="content">
        {% if '注 册' in title %}
            <div class="title">用 户 注 册</div>
        {% else %}
            <div class="title">用 户 登 录</div>
        {% endif %}

        <form id="form" method="post" novalidate>
            {% csrf_token %}
            {% for field in form %}
                {% if 'code' in field.name %}
                    <div class="form-group">
                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                    <div class="clearfix">
                        <div class="col-md-6" style="padding-left: 0;">
                            {{ field }}
                            <span class="error-msg"></span>
                        </div>

                        {% if '注 册' in title %}
                            <div class="col-md-6" id="register">
                            <input type="button" class="btn btn-default" id="btnSms" value="点击获取验证码">
                        {% else %}
                            <div class="col-md-6" id="login">
                            <input type="button" class="btn btn-default" id="btnSms" value="点击获取验证码">
                        {% endif %}

                        </div>
                        <span class="error-msg"></span>

                        </div>
                    </div>
                {% else %}
                    <div class="form-group">
                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                        {{ field }}
                        <span class="error-msg"></span>
                    </div>
                {% endif %}
            {% endfor %}

            {% if '登 录' in title %}
                <input type="button" class="btn btn-primary myBtn" value="{{ title }}" id="btnLogin">

                <a href="/register/" class="btn btn-default myBtn">注册</a>
                <div class="myBtn">
                    <a href="#">忘记密码?</a>
                    <a href="/user/login/" style="margin: 10px">切换账号密码登录</a>

                </div>

            {% else %}
                <input type="button" class="btn btn-primary myBtn" value="{{ title }}" id="btnRegister">
                <a href="/login/" class="btn btn-default myBtn">登录</a>

            {% endif %}
        </form>
    </section>

{% endblock %}

{% block js %}
    <script>
        //页面框架加载完成自动执行
        $(function () {

            bindBtnSms();
            bindRegister();
            bindLogin();

        })


        // 发送短信按钮
        function bindBtnSms() {
            $('#btnSms').click(function () {

                $(".error-msg").empty();
                $.ajax({
                    url: "{% url 'send_code' %}", //等价于 '/send/sms/'
                    type: "GET",
                    data: {
                        username: $('#id_username').val(),
                        email:$('#id_email').val(),
                        phone: $('#id_phone').val(),
                        tpl: $("#btnSms").parent().prop('id'),
                    },
                    success: function (res) {
                        console.log(res);
                        if (res.status) {
                            sendSmsRemind(res);
                        } else {
                            $.each(res.error, function (key, value) {
                                $("#id_" + key).next().text(value[0]);
                            })
                        }
                    }
                })
            })
        };

        // 倒计时定时器
        function sendSmsRemind(res) {
            var $smsBtn = $("#btnSms")

            $smsBtn.prop("disabled", true);  // 给按钮添加不可点击效果
            var time = 59;
            var remind = setInterval(function () {
                $smsBtn.val(time + '秒重新发送');
                time -= 1;
                if (time < 1) {
                    clearInterval(remind);
                    $smsBtn.val('点击获取验证码').prop("disabled", false);
                }
            }, 1000)    // 1秒执行一次

        }

        // 注册按钮
        function bindRegister() {
            $('#btnRegister').click(function () {
                $(".error-msg").empty();
                $.ajax({
                    url: "{% url 'register' %}" + "?tpl=register", //等价于 '/login/'
                    type: "POST",
                    data: $("#form").serialize(),
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.status) {
                            console.log(res);
                            alert('注册成功！点击跳转登录界面');
                            location.href = '/login/'
                        } else {
                            $.each(res.error, function (key, value) {
                                $("#id_" + key).next().text(value[0]);
                            })
                        }
                    }
                })
            })
        }

        // 登录按钮
        function bindLogin() {
            $('#btnLogin').click(function () {
                let p = window.location.pathname;
                if (p === "{% url 'login' %}") {
                    p = p
                } else {
                    p = "{% url 'user_login' %}"
                }

                $.ajax({
                    url: p + "?tpl=login", //等价于 '/login/'
                    type: "POST",
                    data: $("#form").serialize(),
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.status) {
                            console.log(res);
                            location.href = '/index/'
                        } else {
                            $.each(res.error, function (key, value) {
                                $("#id_" + key).next().text(value[0]);
                            })
                        }

                    }
                })
            })
        }

    </script>
{% endblock %}